<template>
  <div class="learning-progress">
    <el-table
      :data="progressData"
      border
      style="width: 100%; margin: 20px"
    >
      <el-table-column prop="registration_id" label="学员ID"/>
      <el-table-column prop="course_name" label="课程名称"/>
      <el-table-column label="学习进度">
        <template slot-scope="scope">
          <el-progress
            :percentage="getProgressPercentage(scope.row)"
            :status="scope.row.completed_hours === scope.row.total_hours ? 'success' : ''"
          />
          <div class="progress-text">
            {{ scope.row.completed_hours }}/{{ scope.row.total_hours }} 学时
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="last_updated" label="最后更新">
        <template slot-scope="scope">
          {{ formatRelativeTime(scope.row.last_updated) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'LearningProgress',
  data() {
    return {
      progressData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // 替换为实际API调用
      //this.progressData = await this.$axios.get('/api/learning-progress')
    },
    formatRelativeTime(date) {
      return moment(date).fromNow()
    },
    getProgressPercentage(row) {
      return Math.round((row.completed_hours / row.total_hours) * 100)
    }
  }
}
</script>

<style scoped>
.progress-text {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}
</style>